<template>
  <div class="content">
    <!-- <Home></Home> -->
    <hr>
    <!-- <About></About> -->
    <hr>
    <button @click="changePage">修改title</button>
    <!--home和about之间的切换-->
    <button @click="currentPage = 'Home'">home</button>
    <button @click="currentPage = 'About'">About</button>

    <component :is="currentPage"></component>
  </div>
</template>

<script>
  import { ref, reactive, onMounted } from 'vue'
  import About from './views/About.vue'
  import Home from './views/Home.vue'
  import UseTitle from './hooks/UseTitle'

  export default {
    components: {
      About,
      Home
    },
    setup() {
      const currentPage = ref('Home')
      // document.title = 'setup' // 原生dom操作
      // 修改title
      function changePage() {
        UseTitle('setup修改')
      }

      return {
        changePage,
        currentPage
      }
    }
  }
</script>

<style scoped>
</style>